<template>
  <div class="product-detail">
    <div>
      <van-sticky>
        <NavBar title="商品详情"></NavBar>
      </van-sticky>

    </div>
    <!-- 富文本 -->
    <div v-html="productInfo.goods_desc"></div>
    <h1>大家都在看</h1>
    <ProductList :list="recommentList"> </ProductList>
    <!-- 底部 -->
    <div class="footer">
      <div>
        <van-icon @click="doCollected" size="20" name="star-o" :color="collected ? 'red' : ''" />
      </div>
      <div>
        <van-icon @click="goCart" size="20" name="cart-o" :badge="allNumber"></van-icon>
      </div>
      <div class="btn-container">
        <div class="btn cart-bg" @click="doAction('cart')">
          加入购物车
        </div>
        <div class="btn buy-bg" @click="doAction('buy')">
          立即购买
        </div>
      </div>
    </div>

    <!-- 弹出层 -->
    <van-popup v-model:show="showPopup" position="bottom" :style="{ height: '30%' }" />
  </div>
</template>
<script setup>
import {
  detailaction as detailactionApi,
  addcollect as addcollectApi,
  addCart as addCartApi,
  submitAction as submitActionApi,
} from '@/api/productDetail'
import {showToast} from 'vant'
import { onMounted, ref,watch } from 'vue';
import { useRouter, useRoute, onBeforeRouteUpdate } from 'vue-router'
import NavBar from '../../components/NavBar.vue';
import ProductList from '../../components/ProductList.vue';
const route = useRoute()
const router = useRouter()
const productId = ref('')
const productInfo = ref({})
const recommentList = ref([])
const allNumber = ref(0)
const collected = ref(false)
const showPopup = ref(false)
productId.value = route.query.id
onMounted(() => {
  getPorductDetail()
})

const getPorductDetail = async () => {
  const res = await detailactionApi({ id: productId.value, openId: localStorage.getItem('openId') })
  productInfo.value = res.info
  recommentList.value = res.productList
  allNumber.value = res.allnumber
  collected.value = res.collected
}

const doCollected = async () => {
  const res = await addcollectApi({ goodsId: productId.value, openId: localStorage.getItem('openId') })
  getPorductDetail()

}

const doAction = async (flag)=>{
  
  if(showPopup.value === true){
    if(flag === 'cart'){
     const res = await addCartApi({goodsId:productId.value,number:1,openId:localStorage.getItem('openId')})
    setTimeout(() => {
      if(res.data === 'success'){
      showToast('加入购物车成功')
     }
    }, 0);
     getPorductDetail()
    }else if(flag ==='buy'){
      const res2 = await submitActionApi({allPrise:productInfo.value.retail_price * 1,goodsId:productId.value,openId:localStorage.getItem('openId')})
      if(res2.data === true){
        // 跳转页面
        router.push({name:'Order'})
      }
    }
  }
  showPopup.value = true
}


const goCart = ()=>{
  router.push({name:'Cart'})
}

// watch(()=>route.query,(newQuery,oldQuery)=>{
//   // console.log('newQuery===>',newQuery);
//   // console.log('oldQuery===>',oldQuery);
//   productId.value = newQuery.id
//   getPorductDetail()
// })

// onBeforeRouteUpdate((to,from)=>{
//   console.log("to===>",to);
//   console.log("from===>",from);
//   productId.value = to.query.id
//   getPorductDetail()
// })












</script>
<style lang="scss" scoped>
.product-detail {
  padding-bottom: 150px;

  :deep(img) {
    width: 100%;
  }

  .footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 750px;
    height: 132px;
    background-color: #fff;

    .btn-container {
      display: flex;

      .btn {
        width: 190px;
        height: 72px;
        font-family: PingFangSC-Medium;
        font-size: 26px;
        color: #FFFFFF;
        letter-spacing: 0;
        font-weight: 500;
        text-align: center;
        line-height: 72px;
      }

      .cart-bg {
        border-bottom-left-radius: 36px;
        border-top-left-radius: 36px;
        background-color: #cea62a;
      }

      .buy-bg {
        background-color: #a04c19;
        border-bottom-right-radius: 36px;
        border-top-right-radius: 36px;
      }
    }

  }

  :deep(.van-popup--bottom){
    bottom:134px
  }
}
</style>